<!--
 * @Author: sbotlp
 * @Email: sbotlp@sina.com
 * @Date: 2019-11-17 21:48:33
 * @LastEditTime: 2019-11-17 22:04:33
 * @Description: http://www.sbotlp.com.cn
 -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom.js"></script>
  <script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom-class.js"></script>
  <script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom-props.js"></script>
  <script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom-style.js"></script>
  <script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom-eventlisteners.js"></script>
  <script src="https://cdn.bootcss.com/snabbdom/0.7.3/h.js"></script>
</head>
<body>
  snabbdom-test
  <div id="container"></div>
  <button id="btn-change">change</button>
  <script>
    var snabbdom = window.snabbdom;
    // 定义path函数, 关键函数1
    var path = snabbdom.init([
      snabbdom_class,
      snabbdom_props,
      snabbdom_style,
      snabbdom_eventlisteners
    ]);
    // 定义H 函数, 关键函数2
    var h = snabbdom.h;
    // 获取容器 
    var container = document.getElementById('container');
    // 生成vnode, 虚拟DOM结构
    var vnode = h('ul#list', {}, [
      h('li.item',{},'item 1'),
      h('li.item',{},'item 2')
    ])
    path(container,vnode);

    document.getElementById('btn-change').addEventListener('click', function(e){
      e.preventDefault();
      var newNode = h('ul#list', {}, [
        h('li.item',{},'item 1'),
        h('li.item',{},'item B'),
        h('li.item',{},'item 3')
      ]);
      path(vnode,newNode);
    });
  </script>
</body>
</html>